<div class="content-area">
    <br>
    <h2>{{'Chart.name'|translate}}</h2>
    <clr-alert [clrAlertClosable]='false' clrAlertType="danger" *ngIf="isShowChartFailed">
        <clr-alert-item>
          {{errorMessage}}
        </clr-alert-item>
    </clr-alert>
    <clr-datagrid [clrDgLoading]="isPageLoading">
        <clr-dg-action-bar>
            <div class="btn-group">
                <button type="button" disabled class="btn" (click)="onOpenModal()">
                    <cds-icon shape="add-text"></cds-icon> {{'CommonlyUse.new'|translate}}
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn" [disabled]="selectedChartList.length===0">
                    <cds-icon shape="trash"></cds-icon> {{'CommonlyUse.delete'|translate}}
                </button>
            </div>
            <a href="javascript:;" class="refreshbtn" (click)="refresh()">
                <cds-icon shape="refresh"></cds-icon>
            </a>
        </clr-dg-action-bar>
        <clr-dg-column [clrDgField]="'name'">{{'CommonlyUse.name'|translate}}</clr-dg-column>
        <clr-dg-column>{{'Chart.helmChartName'|translate}}</clr-dg-column>
        <clr-dg-column>{{'CommonlyUse.description'|translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'type'">{{'CommonlyUse.type'|translate}}</clr-dg-column>
        <clr-dg-column>{{'Chart.helmChartVersion'|translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'created_at'">{{'CommonlyUse.creationTime'|translate}}</clr-dg-column>

        <clr-dg-row *clrDgItems="let chart of chartlist" [clrDgItem]="chart">
            <clr-dg-cell><a [routerLink]="['/chart-detail', chart.uuid]">{{chart.name}}</a></clr-dg-cell>
            <clr-dg-cell>{{chart.chart_name}}</clr-dg-cell>
            <clr-dg-cell>{{chart.description}}</clr-dg-cell>
            <clr-dg-cell>{{constantGather('charttype', chart.type).name | translate}}</clr-dg-cell>
            <clr-dg-cell>{{chart.version}}</clr-dg-cell>
            <clr-dg-cell>{{chart.created_at | dateFormat}}</clr-dg-cell>
        </clr-dg-row>

        <clr-dg-footer>{{chartlist ? chartlist.length : 0}} item(s)</clr-dg-footer>
    </clr-datagrid>
</div>

<!-- Currently, "Add a new chart" is not supported -->
<!-- <clr-modal [(clrModalOpen)]="openModal" [clrModalClosable]="false">
    <h3 class="modal-title">{{'Chart.add'|translate}}</h3>
    <div class="modal-body">
        <form clrForm clrLayout="horizontal" [formGroup]="newchartForm">
            <clr-input-container>
                <label>{{'CommonlyUse.name'|translate}}</label>
                <input clrInput name="name" formControlName="name" />
            </clr-input-container>
            <clr-textarea-container>
                <label>{{'CommonlyUse.description'|translate}}</label>
                <textarea clrTextarea class="t2" name="description" formControlName="description"></textarea>
            </clr-textarea-container>
            <clr-select-container>
                <label>{{'CommonlyUse.type'|translate}}</label>
                <select clrSelect name="type" formControlName="type">
                    <option value="fate_exchange">FATE Exchange</option>
                    <option value="fate_cluster">FATE Cluster</option>
                </select>
            </clr-select-container>
            <clr-input-container>
                <label>{{'CommonlyUse.upload'|translate}}</label>
            </clr-input-container>
            <cds-file layout="compact" class="fileIcon">
                <input #file type="file" single name="file" required />
                <cds-control-message status="success">Success</cds-control-message>
            </cds-file>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="resetModal()">{{'CommonlyUse.cancel'|translate}}</button>
        <button type="button" class="btn btn-primary" (click)="resetModal()">{{'CommonlyUse.submit'|translate}}</button>
    </div>
</clr-modal> -->